<template>
  <el-container style="flex-direction: column; height: 100vh;">
    <!-- 顶部栏 -->
    <HeaderComponent :userInfo="userInfo" />

    <!-- 主内容区 -->
    <el-container style="flex-direction: row; height: 100vh;">
      <!-- 侧边栏 -->
      <SidebarComponent />

      <el-main style="overflow-y: auto;">
        <div class="property-log-view">
          <h2>操作日志</h2>
          <div class="toolbar">
            <el-card style="width: 100%; border-color: gray;">
              <el-input v-model="queryParams.operatorName" placeholder="请输入操作人" style="width: 200px; margin-left: 0px" clearable />
              <el-select v-model="queryParams.returnValue" placeholder="请选择状态" style="width: 200px; margin-left: 50px" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="成功" value="success"></el-option>
                <el-option label="失败" value="error"></el-option>
              </el-select>
              <el-date-picker v-model="queryParams.operationTime" type="date" placeholder="选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="margin-left: 50px" clearable />
              <el-button type="primary" icon="el-icon-search" @click="getLogs" style="margin-left: 250px">查询</el-button>
            </el-card>
          </div>
          <el-table :data="this.logs" style="width: 100%">
            <el-table-column prop="operatorName" label="操作人" width="200px" header-align="center" align="center" />
            <el-table-column prop="operationTime" label="操作时间" width="300px" header-align="center" align="center" />
            <el-table-column label="操作内容" header-align="center" align="center">
              <template #default="scope">
                <span v-html="`类名：${scope.row.className}<br>方法名：${scope.row.methodName}<br>参数：${scope.row.methodParams}`"></span>
              </template>
            </el-table-column>
            <el-table-column label="操作结果" header-align="center" align="center" width="200px">
              <template #default="scope">
                <el-tag :type="scope.row.returnValue.includes('success') ? 'success' : 'danger'">
                  {{ scope.row.returnValue.includes('success') ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-pagination style="margin-top: 20px; text-align: center;" background
            layout="total, sizes, prev, pager, next, jumper" :total="this.total" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange"
            @current-change="handlePageChange" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HeaderComponent from '@/components/property_components/PropertyHeader.vue';
import SidebarComponent from '@/components/property_components/PropertySidebar.vue';
import { parseJwt } from '@/utils/parseJWT';
import service from '@/utils/request';

export default {
  components: {
    HeaderComponent,
    SidebarComponent,
  },
  data() {
    return {
      userInfo: {},
      logs: [],
      total: 0,
      queryParams: {
        operatorName: '',
        returnValue: '',
        operationTime: '',
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
    };
  },
  mounted() {
    this.userInfo = parseJwt(localStorage.getItem('token')).payload;
    this.getLogs();
  },
  methods: {
    // 获取日志数据
    getLogs() {
      service.get('/api/admin/log/getLogs', {
        params: {
          operatorName: this.queryParams.operatorName,
          returnValue: this.queryParams.returnValue,
          operationTime: this.queryParams.operationTime,
          page: this.currentPage,
          pageSize: this.pageSize,
        }
      })
        .then(result => {
          result = result.data;
          if (result.code === 1) {
            this.logs = result.data.rows;
            console.log(this.logs);
            this.total = result.data.total;
          }
        });
    },
    // 每页条数改变
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 条数改变时重置到第一页
      this.getLogs();
    },
    // 页码改变
    handlePageChange(page) {
      this.currentPage = page;
      this.getLogs();
    },
  },
};
</script>

<style scoped>
.property-log-view {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}
</style>